<template>
  <div>
    <x-Table
      ref="table"
      :loading="loading"
      :table-data="tableData"
      :options-data="options"
      :pagination="pagination"
      :rule-form="ruleForms"
      @handleAdd="handleAdd"
      @handlePaginationCurrentChange="handlePaginationCurrentChange"
      @handlePaginationSizeChange="handlePaginationSizeChange"
      @handleHeardDel="handleHeardDel"
      @searchForm="searchForm"
      @resetForm="resetForm"
      @handleSelectionChange="handleSelectionChange"

    >
    </x-Table>
    <!--    弹窗区域-->
    <el-dialog
      v-dialog-drag
      :title="alertTitle"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="45%"
    >
      <form-create
        v-model="fapi"
        :rule="rule"
        :option="option"
        :value.sync="formParam"
        @submit="onSubmit"
      >
      </form-create>
    </el-dialog>
    <!--    end-->
  </div>
</template>

<script>
let _this;
export default {
  data() {
    return {
      searchParams: {},//搜索对象
      loading: true,
      row: null, //当前选择数据
      ruleForms: {
        major: {label: "专业", prop: "major_id", type: "select", select: null},
        name: {label: "姓名", prop: "name", type: "text"},
        sex: {label: "性别", prop: "sex", type: "select", select: [{label: '男', value: '男'}, {label: '女', value: '女'},]},
        idcard: {label: "身份证", prop: "idcard", type: "text"},
        phone: {label: "电话号", prop: "phone", type: "text"},
        student_number: {label: "学号", prop: "student_number", type: "text"},
        exam_number: {label: "准考证号", prop: "exam_number", type: "text"},
        enter_batch: {label: "入学批次", prop: "enter_batch", type: "text"},
        enter_type: {
          label: "入学类型",
          prop: "enter_type",
          type: "select",
          select: [{label: '春招', value: '春'}, {label: '秋招', value: '秋'},]
        },
      },
      pagination: {
        currentPage: 1,
        pageSize: 20,
        pageSizes: [10, 20, 50, 100],
      }, //分页参数
      otherParam: {
        halfCheckedKeys: [],
      }, //如果有其他情况会拼接这个参数
      fapi: {},
      formParam: {},
      rule: [
        {
          "type": "FcRow",
          "children": [
            {
              "type": "col",
              "props": {
                "span": 12
              },
              "children": [
                {
                  "type": "select",
                  "field": "major_id",
                  "title": "专业",
                  "info": "",
                  "props": {
                    "clearable": true,
                  },
                  "effect": {
                    fetch: {
                      action: "http://www.free.com/adminapi/v1.office.OfficeMajor",
                      to: "options",
                      method: "POST",
                      headers: {'website': this.$store.state.user.website},
                      data: {
                        pageSize: 1000
                      },
                      parse(res) {
                        return res.data.data.map((row) => {
                          return {
                            label: row.level + '=>' + row.title,
                            value: row.id,
                          };
                        });
                      },
                    },
                  },
                  "_fc_drag_tag": "select",
                  "hidden": false,
                  "display": true
                }
              ],
              "_fc_drag_tag": "col",
              "hidden": false,
              "display": true
            },
            {
              "type": "col",
              "props": {
                "span": 12
              },
              "children": [
                {
                  "type": "input",
                  "field": "adress",
                  "title": "家庭地址",
                  "info": "",
                  "_fc_drag_tag": "input",
                  "hidden": false,
                  "display": true
                }
              ],
              "_fc_drag_tag": "col",
              "hidden": false,
              "display": true
            }
          ],
          "_fc_drag_tag": "row",
          "hidden": false,
          "display": true
        },
        {
          "type": "FcRow",
          "children": [
            {
              "type": "col",
              "props": {
                "span": 12
              },
              "children": [
                {
                  "type": "input",
                  "field": "name",
                  "title": "姓名",
                  "info": "",
                  "_fc_drag_tag": "input",
                  "hidden": false,
                  "display": true
                }
              ],
              "_fc_drag_tag": "col",
              "hidden": false,
              "display": true
            },
            {
              "type": "col",
              "props": {
                "span": 12
              },
              "children": [
                {
                  "type": "select",
                  "field": "sex",
                  "title": "性别",
                  "info": "",
                  "effect": {
                    "fetch": ""
                  },
                  "options": [
                    {
                      "value": "男",
                      "label": "男"
                    },
                    {
                      "value": "女",
                      "label": "女"
                    }
                  ],
                  "_fc_drag_tag": "select",
                  "hidden": false,
                  "display": true
                }
              ],
              "_fc_drag_tag": "col",
              "hidden": false,
              "display": true
            }
          ],
          "_fc_drag_tag": "row",
          "hidden": false,
          "display": true
        },
        {
          "type": "FcRow",
          "children": [
            {
              "type": "col",
              "props": {
                "span": 12
              },
              "children": [
                {
                  "type": "input",
                  "field": "postal_code",
                  "title": "邮政编码",
                  "info": "",
                  "_fc_drag_tag": "input",
                  "hidden": false,
                  "display": true
                }
              ],
              "_fc_drag_tag": "col",
              "hidden": false,
              "display": true
            },
            {
              "type": "col",
              "props": {
                "span": 12
              },
              "children": [
                {
                  "type": "input",
                  "field": "idcard",
                  "title": "身份证",
                  "info": "",
                  "_fc_drag_tag": "input",
                  "hidden": false,
                  "display": true
                }
              ],
              "_fc_drag_tag": "col",
              "hidden": false,
              "display": true
            }
          ],
          "_fc_drag_tag": "row",
          "hidden": false,
          "display": true
        },
        {
          "type": "FcRow",
          "children": [
            {
              "type": "col",
              "props": {
                "span": 12
              },
              "children": [
                {
                  "type": "input",
                  "field": "phone",
                  "title": "手机号",
                  "info": "",
                  "_fc_drag_tag": "input",
                  "hidden": false,
                  "display": true
                }
              ],
              "_fc_drag_tag": "col",
              "hidden": false,
              "display": true
            },
            {
              "type": "col",
              "props": {
                "span": 12
              },
              "children": [
                {
                  "type": "input",
                  "field": "exam_number",
                  "title": "准考证号",
                  "info": "",
                  "_fc_drag_tag": "input",
                  "hidden": false,
                  "display": true
                }
              ],
              "_fc_drag_tag": "col",
              "hidden": false,
              "display": true
            }
          ],
          "_fc_drag_tag": "row",
          "hidden": false,
          "display": true
        },
        {
          "type": "FcRow",
          "children": [
            {
              "type": "col",
              "props": {
                "span": 12
              },
              "children": [
                {
                  "type": "input",
                  "field": "pwd",
                  "title": "密码",
                  "info": "",
                  "props": {
                    "type": "password",
                    "clearable": true,
                    "showPassword": true
                  },
                  "_fc_drag_tag": "input",
                  "hidden": false,
                  "display": true
                }
              ],
              "_fc_drag_tag": "col",
              "hidden": false,
              "display": true
            },
            {
              "type": "col",
              "props": {
                "span": 12
              },
              "children": [
                {
                  "type": "datePicker",
                  "field": "birthday",
                  "title": "生日",
                  "info": "",
                  "_fc_drag_tag": "datePicker",
                  "hidden": false,
                  "display": true,
                  "value": ""
                }
              ],
              "_fc_drag_tag": "col",
              "hidden": false,
              "display": true
            }
          ],
          "_fc_drag_tag": "row",
          "hidden": false,
          "display": true
        },
        {
          "type": "FcRow",
          "children": [
            {
              "type": "col",
              "props": {
                "span": 12
              },
              "children": [
                {
                  "type": "input",
                  "field": "enter_batch",
                  "title": "入学批次",
                  "info": "入学批次为年份(比如2022年就填写2022)",
                  "_fc_drag_tag": "input",
                  "hidden": false,
                  "display": true
                }
              ],
              "_fc_drag_tag": "col",
              "hidden": false,
              "display": true
            },
            {
              "type": "col",
              "props": {
                "span": 12
              },
              "children": [
                {
                  "type": "select",
                  "field": "enter_type",
                  "title": "入学类型",
                  "info": "",
                  "_fc_drag_tag": "select",
                  "hidden": false,
                  "display": true,
                  "options": [
                    {
                      "value": "春",
                      "label": "春招"
                    },
                    {
                      "value": "秋",
                      "label": "秋招"
                    }
                  ],
                }
              ],
              "_fc_drag_tag": "col",
              "hidden": false,
              "display": true
            }
          ],
          "_fc_drag_tag": "row",
          "hidden": false,
          "display": true
        },
        {
          "type": "FcRow",
          "children": [
            {
              "type": "col",
              "props": {
                "span": 12
              },
              "children": [
                {
                  "type": "input",
                  "field": "student_number",
                  "title": "学号",
                  "info": "",
                  "_fc_drag_tag": "input",
                  "hidden": false,
                  "display": true
                }
              ],
              "_fc_drag_tag": "col",
              "hidden": false,
              "display": true
            },
            {
              "type": "col",
              "props": {
                "span": 12
              },
              "children": [
                {
                  "type": "input",
                  "field": "political",
                  "title": "政治面貌",
                  "info": "",
                  "_fc_drag_tag": "input",
                  "hidden": false,
                  "display": true
                }
              ],
              "_fc_drag_tag": "col",
              "hidden": false,
              "display": true
            }
          ],
          "_fc_drag_tag": "row",
          "hidden": false,
          "display": true
        },
        {
          "type": "FcRow",
          "children": [
            {
              "type": "col",
              "props": {
                "span": 12
              },
              "children": [
                {
                  "type": "input",
                  "field": "graduated_school",
                  "title": "毕业学校",
                  "info": "",
                  "_fc_drag_tag": "input",
                  "hidden": false,
                  "display": true
                }
              ],
              "_fc_drag_tag": "col",
              "hidden": false,
              "display": true
            },
            {
              "type": "col",
              "props": {
                "span": 12
              },
              "children": [
                {
                  "type": "upload",
                  "field": "heard",
                  "title": "头像",
                  "info": "",
                  "props": {
                    "action": "http://www.free.com/api/Upload/upload",
                    "onSuccess": function (res, file) {
                      file.url = res.data[0].url;
                    },
                    "uploadType": 'image',
                    'name': 'file',
                    limit: 1
                  },
                  "_fc_drag_tag": "upload",
                  "hidden": false,
                  "display": true
                }
              ],
              "_fc_drag_tag": "col",
              "hidden": false,
              "display": true
            }
          ],
          "_fc_drag_tag": "row",
          "hidden": false,
          "display": true
        }
      ],
      option: {
        form: {
          inline: false,
          labelPosition: "right",
          size: "small",
          labelWidth: "125px",
          hideRequiredAsterisk: false,
          showMessage: true,
          inlineMessage: false,
        },
        resetBtn: true,
      },
      dialogVisible: false,
      alertTitle: "添加",
      tableData: [],
      options: {
        buttonAdd:'添加',
        buttonEdit:'编辑',
        fields: {
          id: {label: "ID", prop: "id", width: "80", order: true},
          major_id: {label: "专业名称", prop: "majors", type: 'two', options: {obj: 'majors', objKey: 'title'}},
          name: {label: "姓名", prop: "name"},
          image: {
            label: '头像',
            prop: 'heard',
            type: 'image',
            sing: ',',
            style: {width: '30px', height: '30px'},
            preview: function (scope, item, index) {
              console.log(scope)
              console.log(item)
              console.log(index)
            },
          },
          sex: {
            label: "性别",
            prop: "sex",
            type: 'tag',
            options: [{label: '男', attr: 'primary'}, {label: '女', attr: 'success'}]
          },
          adress: {label: "地址", prop: "adress"},
          postal_code: {label: "邮政编码", prop: "postal_code"},
          idcard: {label: "身份证", prop: "idcard"},
          phone: {label: "电话", prop: "phone"},
          exam_number: {label: "准考证号", prop: "exam_number"},
          enter_batch: {label: "入学批次", prop: "enter_batch"},
          enter_type: {label: "入学类型", prop: "enter_type"},
          student_number: {label: "学号", prop: "student_number"},
          birthday: {label: "生日", prop: "birthday"},
          political: {label: "政治面貌", prop: "political"},
          graduated_school: {label: "毕业学校", prop: "graduated_school"},
          create_time: {label: "创建时间", prop: "create_time"},

        },
      },
    };
  },
  methods: {
    clearSelection:function (){
      _this.$refs.table.clearSelection()
    },
    handleCurrentChange:function (data){
      _this.$refs.table.toggleSelection(data)
    },
    handleSelectionChange:function (val){
      _this.$emit('handleSelectionChange',val)
    },

    handlePaginationCurrentChange: function (val) {
      _this.loading = true;
      _this.pagination["currentPage"] = val;
      _this.search(_this.searchParams);
    },

    handlePaginationSizeChange: function (val) {
      _this.loading = true;
      _this.pagination["pageSize"] = val;
      _this.search(_this.searchParams);
    },

    /**
     * 获取所有数据
     */
    getDateList: function () {
      _this.$store
        .dispatch("office/getStudentList", {
          page: _this.pagination["currentPage"],
          pageSize: _this.pagination["pageSize"],
        })
        .then(() => {
          _this.loading = false;
          _this.dialogVisible = false;
          let data = this.$store.state.office.studentList;
          this.tableData = data.data;
          _this.pagination["currentPage"] = data["current_page"];
          _this.pagination["total"] = data["total"];
        });
    },


    /**
     * 查询所有专业数据
     */
    getMajorList: function () {
      _this.$store
        .dispatch("office/getMajorList", {
          pageSize: 1000,
        })
        .then(() => {
          let data = this.$store.state.office.majorList;
          let param = [];
          data.data.forEach((item, index) => {
            let obj = {
              id: item.id,
              label: item.level + ' => ' + item.title,
              value: item.id
            }
            param.push(obj);
          })
          this.ruleForms['major']['select'] = param
        });
    },


    /**
     * 批量删除
     */
    handleHeardDel: function (val) {
      let del = [];
      val.forEach((item, index) => {
        del.push(item.id);
      });
      _this.deleteDate(del);
    },


    addDate: function (param) {
      _this.$store
        .dispatch("office/createStudent", {
          major_id: param["major_id"],
          heard: param["heard"],
          name: param["name"],
          sex: param["sex"],
          adress: param["adress"],
          postal_code: param["postal_code"],
          idcard: param["idcard"],
          phone: param["phone"],
          exam_number: param["exam_number"],
          pwd: param["pwd"],
          enter_batch: param["enter_batch"],
          enter_type: param["enter_type"],
          student_number: param["student_number"],
          birthday: param["birthday"],
          political: param["political"],
          graduated_school: param["graduated_school"],
        })
        .then((res) => {
          const {data, msg} = res;
          if (data) {
            _this.$message.success(msg);
            _this.getDateList();
          } else {
            _this.$message.error(msg);
          }
        });
    },
    /**
     * 表单提交回调
     */
    onSubmit: function (val) {
      if (_this.alertTitle === "添加") {
        _this.addDate(val);
      } else {
        _this.updateDate(val);
      }
    },

    resetForm: function () {
      _this.searchParams = {};
    },

    /**
     * 搜索角色标题
     */
    searchForm: function (val) {
      _this.searchParams = val;
      _this.loading = true;
      _this.search(val);
    },
    search(val) {
      _this.$store
        .dispatch("office/searchStudent", {
          page: _this.pagination["currentPage"],
          pageSize: _this.pagination["pageSize"],
          name: val.name,
          sex: val.sex,
          idcard: val.idcard,
          phone: val.phone,
          student_number: val.student_number,
          exam_number: val.exam_number,
          enter_batch: val.enter_batch,
          enter_type: val.enter_type,
        })
        .then(() => {
          _this.loading = false;
          _this.dialogVisible = false;
          let data = this.$store.state.office.studentList;
          if (data) {
            this.tableData = data.data;
            _this.pagination["currentPage"] = data["current_page"];
            _this.pagination["total"] = data["total"];
          }
        });
    },
    /**
     * 更新角色
     */
    updateDate: function (param) {
      _this.$store
        .dispatch("office/updateStudent", {
          id: _this.row["id"],
          major_id: param["major_id"],
          heard: param["heard"],
          name: param["name"],
          sex: param["sex"],
          adress: param["adress"],
          postal_code: param["postal_code"],
          idcard: param["idcard"],
          phone: param["phone"],
          exam_number: param["exam_number"],
          pwd: param["pwd"],
          enter_batch: param["enter_batch"],
          enter_type: param["enter_type"],
          student_number: param["student_number"],
          birthday: param["birthday"],
          political: param["political"],
          graduated_school: param["graduated_school"],
        })
        .then((res) => {
          const {data, msg} = res;
          if (data) {
            _this.getDateList();
            _this.$message.success(msg);
            return;
          }
          return _this.$message.error(msg);
        });
    },

    /**
     * 删除角色
     */
    deleteDate: function (val) {
      _this.$store
        .dispatch("office/deleteStudent", {
          id: val,
        })
        .then((res) => {
          const {data, msg} = res;
          if (data) {
            _this.getDateList();
            _this.$message.success(msg);
            return;
          }
          return _this.$message.error(msg);
        });
    },

    /**
     *  表单导航栏添加点击
     */
    handleAdd: function () {
      _this.alertTitle = "添加";
      this.dialogVisible = true;
    },
  },
  watch: {
    dialogVisible(newVal) {
      setTimeout(() => {
        if (!newVal) {
          _this.fapi.resetFields(); //清空数据
          _this.fapi.setValue('content', '');
        }
      }, 0);
    },
  },
  created() {
    _this = this;
  },
  mounted() {
    this.getDateList();
    this.getMajorList();
  },
};
</script>

<style scoped></style>
